<!--
  @Descripttion: 投递记录、面试邀约，弹窗居中组件
  @Author：yejianbo
  @Date：2022年06月09日 18:38:23
-->
<template>
  <section class="center-dialog">
    <div class="shadow-bg" />
    <div class="content-box">
      <div class="left">
        <slot name="left" />
      </div>
      <div class="right">
        <slot name="right" />
      </div>
    </div>
  </section>
</template>

<script>
export default {
  // 组件名称
  name: 'CenterDialog',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {}
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.center-dialog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  .shadow-bg {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
  }
  .content-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    .left {
      margin-right: 25px;
    }
  }
}
</style>
